<!-- autor:scott-----date:20220114------for：【JTC-981】工单申请中的设计器表单全屏效果不好，弹出选择人效果也不好 -->
<template>
  <div v-if="visible" class="j-auto-desform-data-full-screen" :style="{backgroundColor:bgColor}">
    <desform-view
      class="desform-view"
      :mode="mode"
      :desformCode="desform.desformCode"
      :dataId="dataId"
      height="100vh"
      :innerDialog="true"
      @close="close"
      @success="handleSuccess"
      @reload="handleReload"
      :isOnline="isOnline"/>
  </div>
</template>

<script>
import DesformView from '@/components/online/desform/DesformView'
import {cssExpand} from '@/utils/util'

export default {
  name: 'AutoDesformFullScreen',
  components: { DesformView },
  props: ['dialogOptions'],
  data() {
    return {
      mode: 'add',
      title: '操作',
      visible: false,
      desform: {},
      dataId: null,
      bgColor: 'rgba(0,0,0,0.6)',
      isOnline: false,
    }
  },
  computed: {
  },
  methods: {
    /** 开启表单 */
    open(mode, desform, dataId, title) {
      this.mode = mode
      this.title = title
      this.dataId = dataId
      this.desform = desform
      this.visible = true
    },

    /** 开始关闭动画 */
    close() {
      this.bgColor = 'rgba(0,0,0,0)'
      setTimeout(() => {
        this.closed()
      }, 150)
    },

    /** 完全关闭，并初始化所有的字段 */
    closed() {
      this.visible = false
      this.$emit('close')
      this.bgColor = 'rgba(0,0,0,0.6)'
      // 恢复body的滚动
      document.body.style.overflow = this.bodyOverflow
      this.bodyOverflow = null
    },
    handleSuccess(event) {
      if (this.dataId == null) {
        this.$emit('added', { desform: this.desform, dataId: event.dataId })
      } else {
        this.$emit('edited', { desform: this.desform, dataId: this.dataId })
      }
      this.close()
    },
    handleReload() {
      this.$emit('ok')
    },

  }
}
</script>


<style lang="less" scoped>
  .j-auto-desform-data-full-screen {
    position: fixed;
    z-index: 999;
    transition: background-color 150ms;

    &, .desform-view {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .desform-view {
      position: absolute;
    }
  }
</style>